<template>
    <el-row style="width: 100%;height: 100%">
        <el-col :span="2">
            <div>
              <div style="background-color: #545c64;padding-top: 10%;padding-bottom: 10%">
                <el-text  style="color: white;margin-left: 8%;font-weight: 700;font-size: large">Golxen门店</el-text>
              </div>
              <el-menu
                  active-text-color="#ffd04b"
                  background-color="#545c64"
                  class="el-menu-vertical-demo"
                  :default-active="store.state.selectMenu"
                  text-color="#fff"
                  @select="handleSelect"
                  style="height:93.3vh;width: 8.34vw"
              >
                <el-menu-item index="/pay" :disabled="store.auth===2">
                    <el-icon><Coin /></el-icon>
                  <span>收银</span>
                </el-menu-item>
                <el-menu-item index="/goods" >
                    <el-icon><Goods /></el-icon>
                  <span>商品</span>
                </el-menu-item>
                <el-menu-item index="/inventory" :disabled="store.auth===3">
                    <el-icon><TakeawayBox /></el-icon>
                  <span>库存</span>
                </el-menu-item>
                <el-menu-item index="/business" :disabled="store.auth!==0">
                    <el-icon><DataLine /></el-icon>
                  <span>生意</span>
                </el-menu-item>
                <el-menu-item index="/store" :disabled="store.auth!==0">
                    <el-icon><Shop /></el-icon>
                  <span>门店</span>
                </el-menu-item>
              </el-menu>
            </div>
        </el-col>

        <el-col :span="22">
            <div>
              <el-container>

                <el-header style=" background-color: rgba(255,255,255,0.72);boxShadow:1px 1px 1px #a6a6a6;z-index: 999;">
                  <div class="toolbar" style="display: flex;" >
                    <div style="flex: 4;">
                      <el-text size="large" >{{storeName}}</el-text>
                      <el-button v-if="store.isAdmin" :icon="Switch" bg text style="margin-left: 2%;margin-bottom: 2%" @click="confirmEvent"/>

                    </div>
                    <div style="flex: 12.5">
                        <el-button @click="refresh">刷新</el-button>
                    </div>
                    <div style="flex: 2;" >
                      <div @click="showQRCode=true">
                        <el-row justify="center">
                          <el-icon style="color: #01d475;padding-top: 5%" size="30"><Shop /></el-icon>
                        </el-row >
                        <el-row justify="center">
                          <el-button link style="padding-bottom: 5%" size="small">门店助手</el-button>
                        </el-row>
                      </div>
                    </div>
                    <div style="flex: 4;">
                      <el-dropdown >
                        <span>
                          <div v-if="store.isAdmin">
                            {{store.getLocalStorage("userMain").id}}
                            <el-icon >
                              <arrow-down />
                            </el-icon>
                          </div>
                          <div v-else>
                            {{store.getLocalEmployeeMain().name}}
                            <el-icon >
                              <arrow-down />
                            </el-icon>
                          </div>


                        </span>
                        <template #dropdown>
                          <el-dropdown-menu style="width: 200px">
                            <div v-if="store.isAdmin">
                              <el-form
                                  style="padding-left: 5%;"
                                  :model="store.getLocalUserMain()"
                              >
                                  <el-form-item label="ID :" >
                                    {{store.getLocalUserMain().id}}
                                  </el-form-item>
                                  <el-form-item label="电话 :">
                                    {{store.getLocalUserMain().tel}}
                                  </el-form-item>
                                  <el-form-item label="邮箱 :">
                                    {{store.getLocalUserMain().mail}}
                                  </el-form-item>
                                <el-form-item label="权限:">
                                  管理员
                                </el-form-item>
                              </el-form>
                            </div>
                            <div v-else>
                              <el-form
                                  style="padding-left: 5%;"
                                  :model="store.getLocalEmployeeMain()"
                              >
                                <el-form-item label="ID :">
                                  {{store.getLocalEmployeeMain().id}}
                                </el-form-item>
                                <el-form-item label="姓名 :">
                                  {{store.getLocalEmployeeMain().name}}
                                </el-form-item>
                                <el-form-item label="电话 :">
                                  {{store.getLocalEmployeeMain().tel}}
                                </el-form-item>
                                <el-form-item label="权限:">
                                  <div v-if="store.getLocalEmployeeMain().auth===1">收银与仓管</div>
                                  <div v-if="store.getLocalEmployeeMain().auth===2">仓管</div>
                                  <div v-if="store.getLocalEmployeeMain().auth===3">收银</div>
                                </el-form-item>

                              </el-form>
                            </div>
                            <el-dropdown-item :icon="Switch" divided @click="toEmployee">
                              切换员工
                            </el-dropdown-item>
                            <el-dropdown-item :icon="Switch" v-if="!store.isAdmin" @click="toAdmin">
                              切换管理员
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                      <el-button :icon="SwitchButton" size="small" style="margin-left: 10%;" @click="isExit=true">
                        退出
                      </el-button>
                    </div >
                    <div style="flex: 1.5;border-left: 1px solid #b4b4b4;text-align: center">
                      <div>
                        <el-text>{{dateFormat(nowDate).date}}</el-text>
                      </div>
                      <div>
                        <el-text>{{dateFormat(nowDate).time}}</el-text>
                      </div>
                    </div>
                  </div>

                </el-header>

                <el-main>
                  <router-view/>
                </el-main>

              </el-container>
            </div>
        </el-col>

    </el-row>

  <el-dialog
      v-model="showQRCode"
      title="关注公众号绑定门店助手"
      width="30%"
      center
  >
    <div style="text-align: center">
      <el-image src="https://rsms-golxen.oss-cn-shenzhen.aliyuncs.com/image/qrcode_for_gh_c82477043aa2_344.jpg"/>
    </div>
  </el-dialog>

  <el-dialog
      v-model="isExit"
      title="退出"
      width="30%"
  >
    <span>确定退出登录吗？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isExit = false">取消</el-button>
        <el-button type="primary" @click="exit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>


  <AddStore/>
  <SwitchStore/>
  <EmployeeLogin/>
  <SwitchAdmin/>
</template>

<script setup>
import {inject, onBeforeMount, onBeforeUnmount, onMounted, ref,} from 'vue'
import request from "@/utils/request";
import 'ant-design-vue/dist/antd.css'
import {store} from "@/store";
import AddStore from "@/components/store/AddStore.vue";


import {
    DataLine,
    TakeawayBox,
    Goods,
    Coin,
  Shop,
  SwitchButton,
  ArrowDown,
  Switch,
} from '@element-plus/icons-vue'
import SwitchStore from "@/components/store/SwitchStore";
import EmployeeLogin from "@/components/store/EmployeeLogin";
import SwitchAdmin from "@/components/store/SwitchAdmin";
import router from "@/router";

let showQRCode=ref(false)
let storeName=ref("")
// const iinject=inject('reload')
let nowDate=ref(new Date().toLocaleString())
let timer=ref()
let isExit=ref(false)

const handleSelect = (key) => {
    store.state.selectMenu=key
    router.push(key)
}

const confirmEvent = () => {
  store.switchStoreFormVisible=true
}

onBeforeMount(()=>{
  getStoreList()
  if (store.getLocalEmployeeMain()!=null){
    store.isAdmin=false
    store.auth=store.getLocalEmployeeMain().auth
  }else {
    store.auth=0
  }
  console.log("权限",store.auth)
  timer.value=setInterval(()=> {
    nowDate.value = new Date().toLocaleString()
  })
})

onMounted(()=>{
  // getStoreList()
  // if (store.getLocalEmployeeMain()!=null){
  //   store.isAdmin=false
  //     store.auth=store.getLocalEmployeeMain().auth
  // }else {
  //     store.auth=0
  // }
  //   console.log(store.auth)
  //   timer.value=setInterval(()=> {
  //   nowDate.value = new Date().toLocaleString()
  // })

})
onBeforeUnmount(()=>{
  if (timer.value) {
    clearInterval(timer.value)
  }
})


const getStoreList= ()=>{

  request.get("/store/get/storeList/"+store.getLocalStorage("userMain").id).then(res=>{
      store.goodsDone=false
        store.storeList=res.data
        if (store.storeList.length===0){
            store.addStoreFormVisible=true
        }else if(store.getLocalStorage("currentStoreMain")==null){
          store.setLocalStorage("currentStoreMain",store.storeList[0])
          storeName.value=store.getLocalCurrentStoreMain().name
          request.get("/goods/get/goodsInfo/"+store.getLocalStorage("currentStoreMain").storeId).then(res=>{
            for (let i in res.data){
              store.setLocalStorage(res.data[i].code,res.data[i])
            }
              // timer3 = setInterval(() => {
                  console.log(store.getLocalStorage(res.data[res.data.length-1]))
                if (store.getLocalStorage(res.data[res.data.length-1])!=null){
                    store.goodsDone=true
                    console.log(1,store.goodsDone)
                    // clearInterval(timer3)
                }
              // }, 1000);
          })
        }else{
            if (store.getLocalStorage(res.data[res.data.length-1])==null){
                request.get("/goods/get/goodsInfo/"+store.getLocalStorage("currentStoreMain").storeId).then(res=>{
                    for (let i in res.data){
                        store.setLocalStorage(res.data[i].code,res.data[i])
                      // console.log(111,store.getLocalStorage(res.data[i].code))
                    }
                    store.goodsDone=true
                    console.log(1,store.goodsDone)
                })
            }else{
                store.goodsDone=true
                console.log(1,store.goodsDone)
            }


        }

    storeName.value=store.getLocalCurrentStoreMain().name

    })
}

const toEmployee = () => {
  store.employeeLoginFormVisible=true
}

const toAdmin=()=>{
  store.switchAdminFormVisible=true
}

const exit = () => {
  localStorage.clear()
  isExit=false
  router.push("/admin/login")
}

const dateFormat=(time) => {
  let date=new Date(time);
  let year=date.getFullYear();
  /* 在日期格式中，月份是从0开始的，因此要加0
  * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
  * */
  let month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
  let day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
  let hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
  let minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
  let seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
  // 拼接
  return {
    date:year+"-"+month+"-"+day,
    time:hours+":"+minutes+":"+seconds
  }
}
const iinject=inject('reload')
const refresh = () => {
    request.get("/goods/get/goodsCodeList/"+store.getLocalCurrentStoreMain().storeId).then(res=>{
        for (let i in res.data){
            localStorage.removeItem(res.data[i])
        }
        request.get("/goods/get/goodsInfo/"+store.getLocalCurrentStoreMain().storeId).then(res=>{
            for (let i in res.data){
                store.setLocalStorage(res.data[i].code,res.data[i])
            }
            store.resetStoreGoodsInfo()
            console.log("resetLocalGoodsInfo done")
            iinject()
        })
    })
}
// const reload=()=>{
//   store.initData={}
//   if (!store.isAdmin)
//     store.employeeMain=store.getLocalEmployeeMain()
//   getStoreList()
//   store.currentStoreMain=store.getLocalCurrentStoreMain()
//   localGoodsToStore()
// }
// const localGoodsToStore=()=>{
//
// }
// const clearCache = () => {
//   localStorage.clear()
// }

</script>

<style scoped>
.el-main {
    padding: 0;
}
.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.el-form-item{
  margin-bottom: 0;
}
</style>